@import "bootstrap/bootstrap.less";
@import "variables.less";
@import "menu.less";
@import "bootstrap/responsive.less";
/**
 *   Override
 */
.popover {
  width: auto;
  .box-shadow(5px 5px 10px 3px rgba(0, 0, 0, 0.2));
}


/*****************************************************************************
 * Mixins
 */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.top-radius(@radius) {
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-topright: @radius;
  -webkit-border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  border-top-right-radius: @radius;
  border-top-left-radius: @radius;

}

/*****************************************************************************
 * Papers
 */
.papers {
  position: relative;
  background: url('/assets/img/small_tiles.png');
  box-shadow:
    0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
    0 8px 0 -5px #eee, /* The second layer */
    0 8px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
    0 15px 0 -10px #eee, /* The third layer */
    0 15px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}

/***
 * CSS Shapes
 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid green;
}

.hidden {
  display: none;
}



/*****************************************************************************
 * Whole page
 */
html {
  height: 100%;
  width: 100%;
}

body {
  width: 100%;
  height: 100%;
  #gradient > .vertical(rgb(84, 129, 167), rgb(73, 120, 161));
  background: url('/assets/img/bg-pattern.png');
  //background: url('http://www.3phase.com/resources/patterns/files/paper-cork.gif');
  margin: 0;
  padding: 0px;
  //background-repeat: no-repeat;
  //background-attachment: fixed;

}


input[type=text], input[type="password"] {
  height: @inputHeight;
}

// fonts
html, body, input, textarea, button {
  font: 16px/1.6 Lucida Grande,sans-serif;
}

li {
  list-style: none;
}

a:hover {
  text-decoration: none;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0px auto;
  display: block;
}

.gray-lighter {
  color: @grayLighter;
}

.gray-light {
  color: @grayLight;
}

.gray {
  color: @gray;
}

@import "article-detail.less";
/*****************************************************************************
 * Header
 */

.header {
  margin-bottom: 10px;
  width: 100%;
  height: @headerHeight;
  position: fixed;
  border-bottom-style: solid;
  border-bottom-width: @headerBorderWidth;
  border-bottom-color: orange;
  z-index: 1000;
  background: url('/assets/img/handmadepaper.png');
}

.header-search {
  margin-top: (@headerHeight - @inputHeight - @headerBorderWidth)/2;
  margin-right: 30px;
}

.header-txt {
  height: @headerHeight;
  min-width: @authorBoxWidth/2;
  text-align: center;
}

.header-txt ul {
  margin-left: 0px;
}

.bottom-green {
  border-bottom-style: solid;
  border-bottom-width: @headerBorderWidth;
  border-bottom-color: green;
}

.bottom-green * {
  color: green;
}

.bottom-red {
  border-bottom-style: solid;
  border-bottom-width: @headerBorderWidth;
  border-bottom-color: red;
}

.bottom-red * {
  color: red;
}

.bottom-blue {
  border-bottom-style: solid;
  border-bottom-width: @headerBorderWidth;
  border-bottom-color: lighten(blue, 13%);  
}

.bottom-blue * {
  color: lighten(blue, 13%);  
}

.header-txt .dropdown-menu {
  margin-top: 2*@headerBorderWidth;
}


/*****************************************************************************
 * Content
 */

.content {
  padding-bottom: 35px;
  position: relative;
  margin: 0 auto;
  display: block;
  text-align: center;
  width: auto;
}


/*****************************************************************************
 * Right side bar
 */

.articles {
  margin-left: 0px;
  padding-top: @contentPadding;
  .transition(all 30ms);
  position: relative;
}
.article-box:hover {
  .box-shadow(0px 0px 10px 3px rgba(0, 0, 0, 0.2));

}
.article-box {
  width: @articleBoxWidth;
  height: @articleBoxHeight;
  margin: @articleBoxMargin;  
  background: @white;
  padding: @articleBoxPadding;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(212, 209, 210);
  position: relative;
  text-align: left;
  _height: @articleBoxHeight;
  .transition(all 30ms);
}

.share-link {
  text-align: center;
  margin: 0 auto;
  height: auto;
}

.share-photo {
  width: @sharePhotoWidth;
  height: @sharePhotoWidth;
  margin: @articleBoxMargin;  
  background: @white;
  padding: 0px;
  border-style: solid;
  border-width: 5px; 
  border-color: white;
  _height: @sharePhotoWidth;
}

.share-photo img {
  max-width: 1000px;
}

.photo-selected {
  border-style: solid; 
  border-width: 5px; 
  border-color: #33CC00;
}

.center-box {
  overflow: hidden; 
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

.article-box .article-title {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: @grayLighter;
  height: @articleBoxTitleHeight;
}

.article-box .article-title a {
  color: @gray;  
}

.article-box .bookmark {
  float: right;
  .opacity(20);
}

.article-box .bookmark:hover {
  cursor: pointer;
}

.article-box .bookmark-active {
  position: absolute;
  right: 1px;
  top: -4px;
  width: 33px;
  height: 57px;
  display: none;
  .opacity(100);
  z-index: 100;
}

.article-thumb {
  height: @articleBoxImageHolderHeight;
  width: @articleBoxWidth - 2*@articleBoxPadding;
  margin: 0px auto;
  display: block;
  overflow: hidden;
}

.article-img {
  margin: 0px auto;
  width: 100%;
}

.article-img:hover {
  cursor: pointer;
}

.stats {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: darken(@grayLighter, 2%);
  height: 38px;
  cursor: pointer;
}

.comment, .voteup, .votedown {
  float: left;
  width: 33%;
  text-align: center;
  padding-top: 8px;
}

.comment, .voteup {
  border-right-style: solid;
  border-right-color: white;
  border-right-width: 1px;  
}

.comment {
  color: orange;
}
.voteup {
  color: green;
}

.votedown {
  color: red;
}
.timestamp {
  float: right;
  color: @grayLight;
}

/*****************************************************************************
 * Loading gif
 */
.loading-gif {
  width: 30px;
  bottom: 10px;
}


@media (max-width: 480px) {
  .article-box {
    width: 87%;
  }
  
  .article-thumb {
    width: 100%;
    border: 5px;
    border-color: transparent;
  }
  
  .article-thumb img {
    width: 100%;
    //height: 100%;
  }
}

